<template>
  <div style="width: 1440px">
    <el-carousel :interval="4000" type="card" height="300px" width="1400px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <div class="GuessULike" style="width: 1200px; background-color: white">
      <h2 style="margin-left: 90px">
        <el-tag style="color: OrangeRed">好货推荐</el-tag>
      </h2>

      <el-row>
        <el-col
          :span="8"
          v-for="(item,id) of List"
          :key="id"
          :offset="item.index > 0 ? 2 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="width: 200px; height: 265px"
            class="youhaohuoHover"
          >
            <img
              :src="'http://localhost:5000/files/'+item.imageId"
              class="image"
            />
            <div style="panding: 0px">
              <el-button type="text" class="button" @click="gotoDetails(item)"
                >点我购买</el-button
              >
              <div class="bottom clearfix">
                <span>￥{{item.spuprice}}</span>
                <br />
                <span>{{item.spuname}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {Spuname} from "../api/store"
export default {
  data(){
    return{
        select:{
 name:"",
        },
     
      List:[]
    }
  },
  created() {
    
    this.select.name = this.$route.query.supname;
    console.log(this.$route.query);
    // this.name = this.$route.query.name;
    console.log(this.select.name);
    console.log(this.$route.query.supname);
  },
  mounted(){
    Spuname(this.select.name).then(data=>{
        console.log(this.select.name);
        console.log(data.data);
        this.List=data.data
        if(data.data.length==0)
        {
              this.$message({
          message: '暂无商品详情',
          type: 'warning'
        });
        }
        
    })
    

    
  },
  
  
};
</script>

<style scoped>
.el-card:hover {
  margin-top: -5px;
}
.el-col-8 {
  width: 12.5%;
  margin-top: 2%;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.el-col {
  border-radius: 4px;
  align-items: stretch;
  margin-bottom: 40px;
  margin-left: 90px;
}
.image {
  width: 200px;
  height: 180px;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>